<template>
  <div>
    <input
      ref="PDAScan"
      v-model="PDACode"
      @focus.prevent="blurscan"
      @input="inputscan"
      style="position: fixed; top: -0.1rem; opacity: 0; width: 0.1rem"
      autofocus
    />
  </div>
</template>

<script>
// PDA扫码页面
export default {
  name: "Analysis",
  props: {
    saoparams: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: {},
  data() {
    return {
      PDACode: "",
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initFocus();
    });
    document.onkeydown = (e) => {
      console.log(e,'eee');
      if (e.key != "Enter" && e.keyCode == "13") {
        this.$refs.PDAScan.focus();
      }
    };
  },
  methods: {
    initFocus() {
      console.log("聚焦了");
      this.$refs.PDAScan.focus();
    },
    // PDA扫码输入框聚焦时不调用手机键盘
    blurscan() {
      this.$refs.PDAScan.setAttribute("readonly", "readonly");
      setTimeout(() => {
        this.$refs.PDAScan.removeAttribute("readonly");
      }, 200);
    },
    // PDA扫码
    inputscan(v) {
      var str = v.target.value;
      const cleanedResult = str.replace(/\s/g, ""); // 清理不可见字符
      try {
        const parsedResult = JSON.parse(cleanedResult);

        // 这里只能扫 工单和物品码
        if (
          parsedResult &&
          parsedResult.EntityType &&
          (parsedResult.EntityType == "lattice" ||
              parsedResult.EntityType == "goods" ||
            parsedResult.EntityType == "shelfTask" ||
            parsedResult.EntityType == "picking")
        ) {
          this.$emit("changeScan", parsedResult, "scan");
          this.PDACode = "";
        } else {
          // 扫描结果无效
          this.$toast("请扫正确的二维码");
          this.PDACode = "";
        }
      } catch (error) {
        console.error(error);
        this.$toast("请扫正确的二维码");
        this.PDACode = "";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.topbtn {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0.05rem 0.06rem;
  border-bottom: 1px solid #e9e9e9;
  .title {
    width: 80%;
    text-align: center;
  }
  .oksum {
    color: #1890ff;
  }
}
.data {
  padding: 0.1rem;
}
.table {
  overflow-x: hidden;
  overflow-y: auto;
  text-align: center;
  .tr {
    width: 100%;
    .wit {
      width: 10%;
    }
    .th {
      text-align: center;
    }
    .td {
      text-align: center;
      word-wrap: break-word;
    }
  }
}
.tdbtn {
  color: #ff0000 !important;
}
</style>
